/*
 * @Author: Wxx
 * @Date: 2022-02-22 14:12:06
 * @LastEditors: Wxx
 * @LastEditTime: 2022-02-22 14:18:30
 * @Description:
 */
import React, { Component, useState, useEffect } from "react";
import axios from "axios";

function FilmList(props) {
  const [list, setList] = useState([]);

  //初次加载完组件会执行一次 在props.type更新时也会执行
  useEffect(() => {
    if (props.type === 1) {
      axios({
        url: "https://m.maizuo.com/gateway?cityId=440100&pageNum=1&pageSize=10&type=1&k=4559557",
        headers: {
          "X-Host": "mall.film-ticket.film.list",
          "X-Requested-With": "XMLHttpRequest",
        },
      }).then((res) => {
        setList(res.data.data.films);
      });
    } else {
      axios({
        url: "https://m.maizuo.com/gateway?cityId=440100&pageNum=1&pageSize=10&type=2&k=6860107",
        headers: {
          "X-Host": "mall.film-ticket.film.list",
          "X-Requested-With": "XMLHttpRequest",
        },
      }).then((res) => {
        setList(res.data.data.films);
      });
    }
  }, [props.type]);
  return (
    <div>
      <ul>
        {list.map((item) => (
          <li key={item.filmId}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default class App extends Component {
  state = {
    type: 1,
  };
  render() {
    return (
      <div>
        <button onClick={() => this.setState({ type: 1 })}>正在热映</button>
        <button onClick={() => this.setState({ type: 2 })}>即将上映</button>
        <FilmList type={this.state.type} />
      </div>
    );
  }
}
